<template>
  <div class="detail">
    <div class="content">货道: {{serialNum}}</div>
    <div class="content">
      <img :src="imageUrl" style="width: 200px" alt="">
    </div>
    <div class="content">名称: {{productName}}</div>
    <div class="content">价格: {{price}}</div>
    <hr />
    <div class="content">
      <img :src="qrImageUrl" style="width: 100px" alt="">
    </div>
    <router-link to="/" @click.native="backProductList">商品列表</router-link>
    <h3>{{seconds}}</h3>
  </div>
</template>
<script>
  export default {
    name: 'ProductDetail',
    data () {
      return {
        productName: '',
        imageUrl: '',
        price: '',
        serialNum: '',
        qrImageUrl: '',
        seconds: 90,
        n: null
      }
    },
    sockets: {
        paySuccess () {
            //支付成功,跳转到成功页面
          this.$router.push('/paySuccess');
          clearInterval(this.n);
        }
    },

    created() {
      this.productName = this.$route.params.name;
      this.imageUrl = this.$route.params.imageUrl;
      this.price = this.$route.params.price;
      this.serialNum = this.$route.params.serialNum;
      this.qrImageUrl = this.$route.params.qrImageUrl;
      this.n = setInterval(() => {
          //90后返回商品列表
          this.seconds --;
          if(this.seconds === 0){
            clearInterval(this.n);
            this.$router.push('/');
          }
      }, 1000)
    },

    methods: {
      backProductList () {
          clearInterval(this.n);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .content {
    text-align: center;
  }

</style>
